<template>
	<view :style="objColor">
		<!-- homeSub/pages/startCharging/startCharging.wxml -->
		<!-- 启动充电 -->

		<view v-if="waitingDisplay">

			<!-- <view class="content" style="height: 750rpx">
			    <l-svga src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/out.svga"></l-svga>
			</view> -->
			<!-- <image class="header-image" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/startChargingBg.png" style="width: 100%"></image> -->
			<view class="main_time">{{ waitingTime }}</view>
			<view style="width: 100%; height:353rpx;padding-top: 130rpx;overflow-x:hidden;" id="chargingCanvas">
				<l-svga ref="svga" class="SVGACon"></l-svga>
			</view>
			<!-- <div class="svgaPage">
				<div id="chargingCanvas"></div>
			</div> -->
			<view class="starting">{{isv2g ? '放电结束中' : '充电结束中'}}</view>
			<view class="w_text">

				<view class="t_tips">
					<text>请勿关闭本页面，设备预计60秒内关闭</text>
					<text v-if="isv2g"> 为避免产生额外占位费，放电结束后请拔枪驶离车位</text>
					<text v-else> 为避免产生额外占位费，充电结束后请拔枪驶离车位</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	'use strict';
	//import SVGA from "svgaplayerweb";

	var https_1 = require('./../../../api/https.js');
	var newapp = getApp()
	var videoItem2 = '';
	var videoItem3 = '';
	export default {
		data() {
			return {
				// 倒计时60s
				waitingTime: 60,
				// 表示已经停止充电成功不需要跳转结算页面
				stopCountDownFn: false,
				waitingDisplay: true,
				animation: 0,
				parameter: {},
				busId: '',
				gunNo: '',
				pileNo: '',
				player: {},
				parser: {},
				failureReason: '', // 失败原因
				stationId: '',
				isv2g: false, // 是否是v2g充电 #V2G功能
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			console.log(options, '----')
			uni.showLoading({
				title: '加载中'
			});
			this.stationId = options.stationId
			this.busId = options.busId
			this.billId = options.billId

			// 判断是否是v2g充电 #V2G功能
			if (options.isv2g && this.isV2GOption) {
				this.isv2g = true
			}

			this.$nextTick(() => {
				this.getMove()
			})
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			this.goOut()
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			this.goOut()
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		mounted() {},
		methods: {
			//停止充电
			stop: function() {
				var that = this;
				https_1
					.stopCharge({
						busId: this.busId
					})
					.then(function(res) {
						if(res.code==0){
							that.goCharge(res.code)
						}else {
							uni.showModal({
								title: '消息提示',
								content: res.msg,
								confirmText: '返回首页',
								showCancel: false,
								success: function(res) {
									// 查看充电详情
									uni.switchTab({
										url: '../../../pages/index/index'
									});
								}
							});
						}
						
					});
			},

			// v2g停止放电 - #V2G功能
			onStopDisCharge() {
				https_1.v2gStopDisCharge({
					busId: this.busId,
				}).then(res => {
					if (res.code === 0) {
						this.goCharge(res.code)
					}
				})
			},

			// 充电启动倒数
			goCharge(code) {
				var that = this;

				// 倒计时函数
				let countDownFn = () => {
					if (that.stopCountDownFn) {
						return
					}
					if (that.waitingTime <= 1) {
						that.goOut()
						uni.redirectTo({
							url: '../../../orderSub/pages/orderInSettlement/orderInSettlement?orderId=' + that.billId +
								'&stationId=' + this.stationId
						});
					} else {
						that.waitingTime = that.waitingTime - 1
						setTimeout(countDownFn, 1000)
					}
				}

				// 倒计时开始
				countDownFn()

				let fn1 = () => {
					https_1.myBillDetails({
						id: that.billId
					}).then((res) => {
						if (res.data.billStatus >= 11) {
							that.goOut()
							if (!that.marketingSwitch) {
								uni.redirectTo({
									url: '../../../orderSub/pages/orderSettlement/orderSettlement?busId=' + that.busId +
										"&backType=2" + '&stationId=' + this.stationId
								});
							} else {
								uni.redirectTo({
									url: '../../../orderSub/pages/orderSettlementYxhk/orderSettlement?busId=' + that.busId +
										"&backType=2" + '&stationId=' + this.stationId
								});
							}
						} else {
							that.waitingTime > 1 && setTimeout(fn1, 1000)
						}
					}).catch((err) => {
						that.waitingTime > 1 && setTimeout(fn1, 1000)
					})
				}

				let fn2 = () => {
					https_1.myBillDetails({
						id: that.billId
					}).then((res) => {
						if (res.data.billStatus == 10 || res.data.billStatus == 11 || res.data.billStatus == 12 || res.data
							.billStatus == 13 || res.data.billStatus == 15) {
							uni.hideLoading();
							that.goOut()
							if (!that.marketingSwitch) {
								uni.redirectTo({
									url: '/orderSub/pages/orderSettlement/orderSettlement?busId=' + res.data.busId +
										"&backType=2" + '&stationId=' + this.stationId
								})
							} else {
								uni.redirectTo({
									url: '/orderSub/pages/orderSettlementYxhk/orderSettlement?busId=' + res.data.busId +
										"&backType=2" + '&stationId=' + this.stationId
								});
							}
						} else if (res.data.billStatus == 14 || res.data.billStatus == 18 || res.data.billStatus == 17 || res
							.data.billStatus == 3 || res.data.billStatus == 16) {
							uni.hideLoading();
							that.goOut()
							if (!that.marketingSwitch) {
								uni.redirectTo({
									url: '/orderSub/pages/orderDetails/orderDetails?orderId=' + that.billId + '&stationId=' +
										this.stationId
								});
							} else {
								uni.navigateTo({
									url: '/orderSub/pages/orderDetailsYxhk/orderDetailsYxhk?orderId=' + that.billId +
										'&stationId=' + this.stationId
								});
							}
						} else {
							that.waitingTime > 1 && setTimeout(fn2, 5000)
						}
					}).catch((err) => {
						that.waitingTime > 1 && setTimeout(fn2, 5000)
					})
				}

				if (code == 0) {
					that.waitingTime > 1 && fn1()
				} else {
					that.waitingTime > 1 && fn2()
				}
			},

			// 获取动图svga 开启动画
			async getMove() {
				this.$refs.svga.render(async (parser, player) => {
					//#ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY
					if(newapp.globalData.sellerNo == 'hyc'){
						videoItem2 = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/endCharging.svga`)
					}else{
						videoItem2 = await parser.load("https://oos-cn.ctyunapi.cn/front-end/static/cartoon/endCharging.svga");
					}
					//#endif
					
					//#ifdef H5
					videoItem2 = await parser.load(`${newapp.globalData.imgUrl}/h5/cartoon/endCharging.svga`)
					//#endif
					this.enter()
					
					// #V2G功能
					if (this.isV2GOption && this.isv2g) {
						this.onStopDisCharge()
					} else {
						this.stop()
					}
					uni.hideLoading();

				})
			},

			// 静止动画
			enter: function() {
				this.$refs.svga.render(async (parser, player2) => {
					await player2.setVideoItem(videoItem2);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player2.loops = 999
					// 开始播放动画，reverse = true 时则反向播放。
					player2.startAnimation()
				})

			},
			goOut() {
				// 设置成0停止倒计时
				this.waitingTime = 0
				// 停止倒计时状态
				this.stopCountDownFn = true
				this.$refs.svga.render((parser, player2) => {
					player2.loops = 1
					player2.stopAnimation(true)
					try {
						player.clearDynamicObjects()
					} catch (e) {}
					console.log('动画结束停止充电11')
				})
			},

			// 退出动画
			out: () => {
				this.$refs.svga.render(async (parser, player) => {
					await player.setVideoItem(videoItem3);
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 1
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation()
					//player.onPercentage(this.enter)
					// 监听动画完成
					player.onFinished(() => {
						console.log('动画结束333')
						//player.pauseAnimation()
						//player.setVideoItem(videoItem2)
						uni.reLaunch({
							url: `/echartsPages/pages/power/power?busId=${this.busId}&pileNo=${this.pileNo}&gunNo=${this.gunNo}&backType=2`
						});
					})
				})
			},
			/**
			 * 弹框
			 */
			wxalert: function(str) {
				uni.showModal({
					title: '消息提示',
					content: str,
					showCancel: false
				});
			}
		}
	};
</script>
<style lang="less">
	/* homeSub/pages/startCharging/startCharging.wxss */
	@import "../../../commin/commin.less";

	.w_text {
		width: 686rpx;
		margin: 30rpx auto 0;
		font-size: 28rpx;
		color: #9699a6;

		.t_sign {
			color: #ff8a5b;
		}

		.t_tips {
			font-size: 24rpx;
			text-align: center;

			text {
				display: block;
				text-indent: 40rpx;
				line-height: 45rpx;
			}
		}
	}

	.header-image {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.coverView {
		position: fixed;
		top: 0;
		width: 414px;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
	}

	.starting {
		text-align: center;
		font-size: 30rpx;
		color: var(--textColor);
		letter-spacing: 4rpx;
		position: relative;
		z-index: 2;
		font-weight: bold;
	}

	.overtime {
		text-align: center;
		padding-top: 205rpx;
	}

	.overtimeTitle {
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: @blue;
		letter-spacing: 4rpx;
		margin-top: 12rpx;
	}

	.againButton {
		width: 680rpx;
		height: 88rpx;
		background: @blue;
		box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
		border-radius: 44rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		position: fixed;
		bottom: 144rpx;
		right: 0;
		left: 0;
	}

	.main_time {
		text-align: center;
		position: relative;
		top: 330rpx;
		color: #34F0B9;
		font-size: 27rpx;
	}

	#chargingCanvas {
		width: 256rpx;
		height: 256rpx;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.SVGACon {
		canvas {
			z-index: 1;
		}
	}
</style>